<template>
	<div class="person">
		姓：<input type="text" v-model="firstName"><br/>
		名：<input type="text" v-model="lastName"><br/>
		<button @click="changeFullName">将全名改为li—si</button><br/>
		
		全名-计算属性：<span>{{fullName}}</span><br>
		全名-计算属性：<span>{{fullName}}</span><br>
		全名-计算属性：<span>{{fullName}}</span><br>
		全名-方法调用：<span>{{fullName2()}}</span><br>
		全名-方法调用：<span>{{fullName2()}}</span><br>
		全名-方法调用：<span>{{fullName2()}}</span><br>
		
	</div>
	
</template>

<script setup name="Person">
    import {ref,computed} from "vue";
	
	let firstName=ref('zhang')
	let lastName=ref('san')
	
	//普通方法调用没有缓存
	function fullName2() {
		console.log(2)
		return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'-'+lastName.value
	}
	
	//fullName是一个计算属性，计算属性有缓存
	//getter 方法获取计算属性的值，不能修改计算属性
	/*let fullName=computed(()=>{
		console.log(1)
		return firstName.value+'-'+lastName.value
	})*/
	
	let fullName=computed({
		//当fullName被读取时，get被调用
		get(){
			console.log(1)
			return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'-'+lastName.value
		},
		//当fullName被修改时，set被调用，参数就是被修改后的值
		set(val){
			console.log(val)   //li-si
			let [str1,str2] =val.split('-')
			firstName.value=str1
			lastName.value=str2
		}
	})
	function changeFullName() {
		//计算属性也是ref定义的响应式数据
		fullName.value='li-si'
	}
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
    }

    button {
        margin: 0 5px;
    }
</style>